<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="tabList" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="margin_right lableradius waisong" v-if="item.type==0">外送</view>
					<view class="margin_right lableradius ziqu" v-if="item.type==1">自取</view>
					<view class="margin_right lableradius neiyong" v-if="item.type==2">内用</view>
					<text class="hong_text bold" style="font-size: 36rpx;">#{{item.call_no}}</text>
				</view>
				<view class="titletext margin_top1 hei_text bold">{{item.goods_name}}</view>
				<view class="flexright margin_top1">
					<!-- <view>
						<view v-if="item.type==0">
							<text class="xiaohui">外送/</text>
							<text class="xiaohuang margin_right">{{item.num}}件</text>
						</view>
						<view v-if="item.type==1">
							<text class="xiaohui margin_right">自取/</text>
							<text class="xiaohuang">{{item.num}}件</text>
						</view>
						<view v-if="item.type==2">
							<text class="xiaohui">内用/</text>
							<text class="xiaohuang margin_right">{{item.num}}件</text>
						</view>
					</view> -->
					<text class="xiaohuang bold" style="font-size: 40rpx;">X{{item.num}}件</text>
				</view>
				<view class="xiaolan margin_top1 bold main_size" v-if="item.spunatdata && item.spunatdata.length">
					規格：<text class="margin_right2" v-for="(value) in item.spunatdata"
						:key="value.spunatid">{{value.spunatname}}*{{value.num}}</text></view>
				<view class="flexbetween margin_top1">
					<view class="beihuolable huang_text radius main_size" @click="printTag(item)">印標簽</view>
					<view class="flexright" style="flex: 2;" v-if="item.is_end==1">
						<view class="beihuolable huang_text radius main_size">已完成</view>
					</view>
					<view class="flexright" style="flex: 2;" v-if="item.is_end==0" @click="complete(item.id)">
						<view class="beihuolable huang_text radius main_size">完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [], //工作站
				shop_id: uni.getStorageSync("shop_id"),
				list: {
					data: []
				},
				shopwork_id: "", //默认选中的工作站id
			}
		},
		onLoad() {
			this.getWorkList()
		},
		methods: {
			async getWorkList() { //工作站列表
				let _this = this
				let res = await this.http.request('/api/shop/listWork', 'POST', {
					shop_id: this.shop_id, //店鋪id
					type: 1
				})
				if (res.code == 1) {
					res.data.forEach(item => {
						this.$set(item, "badge", {
							value: item.order_num
						})
					})
					this.tabList = res.data
					if(this.shopwork_id==""){
						this.shopwork_id = this.tabList[0].id
					}
					this.getList()
				} else {
					this.http.toast(res.msg)
				}
			},
			async getList(isPage, page) { //列表
				let _this = this
				let res = await this.http.request('/api/Ordergoods/beilistgoods', 'POST', {
					shopwork_id: this.shopwork_id, //工作站id
				})
				if (res.code == 1) {
					this.list.data = res.data
				} else {
					this.list.data = []
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			tabChage(e) {
				console.log(e);
				this.shopwork_id = e.id
				this.getList()
			},
			async complete(id) { //商品完成
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let res = await this.http.request('/api/Ordergoods/addendgoods', 'POST', {
					order_goods_list_id: id, //订單商品Id
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.http.toast("操作成功")
					this.getWorkList()
				} else {
					this.http.toast(res.msg)
				}
			},
			async printTag(item) { //印标签
			uni.showLoading({
				mask: true,
				title: "請稍後"
			})
				let res = await this.http.request('/api/Ordergoods/addyingoods', 'POST', {
					order_goods_list_id: item.id, //订單商品Id
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.http.toast("操作成功")
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	.beihuolable {
		background-color: #fff3e6;
		padding: 10rpx 30rpx;
		border: 1rpx solid #FF8505;
	}

	page {
		background-color: #c3c3c3;
	}

	.lableradius {
		border-radius: 10rpx 10rpx 10rpx 0;
		padding: 5rpx 10rpx;
		font-size: 36rpx,
	}
</style>